<!-- 双轴折线图 -->
<template>
    <div id="container">     
    </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
import {toStandardTime} from "@/utils/time_utils"
 
export default {
    props:[
        'data',
        // 仅支持显示双轴，左右
        // 'x_axis_data', 'y_axis_data_left', 'y_axis_data_right',
        // 字段信息及描述信息(字段别名)
        'field_info',
        // 线条颜色
        "line_colors",
    ],
    data(){
        return {
            dualAxes: null,
        }
    },
    mounted(){
        var options = []
        for(var i = 0; i < this.line_colors.length; i++){
            options.push({
                geometry: 'line',
                color: this.line_colors[i],
                stepType: 'vh',
                smooth: false,
            })
        }
        this.dualAxes = new DualAxes('container', {
            data: [this.data, this.data],
            xField: this.field_info['x_axis'],
            yField: [this.field_info['y_value_left'], this.field_info['y_value_right']],
            geometryOptions: options,
            legend:{
                position: "left",
                selected: {
                    // 默认置灰
                    price: false,
                },
            },
            slider: {
                formatter: (dateStr)=>{
                        return toStandardTime(dateStr)
                    } 
            },
            meta:{
                updateTime: {
                    formatter: (dateStr)=>{
                        return toStandardTime(dateStr)
                    } 
                }
            },
        });
        this.dualAxes.render();
        // console.log("子组件mounted完成...")
        // label item 添加点击事件
        // this.dualAxes.on('legend-item:click', (...args) => {
        //     // console.log(this.dualAxes.chart.options)
        // });
    },
    methods:{
        update(){
            this.dualAxes.changeData([this.data, this.data]);
            // console.log("子组件更新数据", this.data)
        },
        clickLegend(key){
            console.log(key, this.dualAxes.chart.options)
        },
        updateOption(option){
            this.dualAxes.update(option)
        }
    },
    watch:{
        data(){
            this.update()
        }
    }
}
</script>

<style scoped lang="less">
.splider{
    display: block;
    width: 100%;
    height: 20px;
    background-color: aqua;
    margin-top: 80px;
}

#container{
    height: 300px;
    margin-right: 5%;
    margin-left: 5%;
    margin-bottom: 40px;
}
</style>